//class to implement scroll bar property
// this class will be used to implement chatbox and frame like entities
function scrollbar(name)
{
	this.name = name;
	this.scrollbar_holder; //scrollbar_holder part of object
	this.control_up;
	this.control_down;
	
	this.init = function()
	{
		this.scrollbar_holder = new scrollbar_holder("scroll_holder"); //scrollbar_holder part of object
		this.scrollbar_holder.size.width = 14;
		this.scrollbar_holder.size.height = 40;
		this.scrollbar_holder.position.x = this.position.x+this.size.width-this.scrollbar_holder.size.width;
		this.scrollbar_holder.position.y = this.position.y + 16;
		this.scrollbar_holder.dragMin = [this.position.x+this.size.width-this.scrollbar_holder.size.width, this.position.y + 16];
		this.scrollbar_holder.dragMax = [this.position.x+this.size.width-this.scrollbar_holder.size.width, this.position.y + this.size.height - 16 - this.scrollbar_holder.size.height ];
		this.scrollbar_holder.addEventListener("onmousedown",new Function("event,caller","dragItem = caller;")); // make the scrollbar_holder draggable
		this.scrollbar_holder.parent = this;
		this.scrollbar_holder.init();
		
		//create control butons
		this.control_up = new scrollbar_control("up");
		this.control_down = new scrollbar_control("down");
		this.control_up.size.width = 15;
		this.control_down.size.width = 15;
		this.control_up.size.height = 15;
		this.control_down.size.height = 15;
		this.control_up.position.x = this.position.x+this.size.width-15;
		this.control_down.position.x = this.position.x+this.size.width-15;
		this.control_down.position.y = this.position.y+this.size.height - 16;
		this.control_up.position.y = this.position.y;
		this.control_down.type = "down";
		this.control_up.type = "up";
		this.control_down.parent = this;
		this.control_up.parent = this;
		//test
		
		globalScreen.addItem(this.control_up);
		globalScreen.addItem(this.control_down);
		
		//alert(this.control_up.sectionPlaces)

		globalScreen.addItem(this.scrollbar_holder); //add scrollbar_holder to globalScreen to make it drawable
	}
	
	this.draw = function(ctx)
	{
	//first draw the controls
	ctx.save();
	ctx.fillStyle = "#1A1A1A";
	ctx.fillRect(this.position.x+this.size.width-15, this.position.y,15,15);
	ctx.fillRect(this.position.x+this.size.width-15, this.position.y+this.size.height - 16,15,15);
	//draw base for scrollbar_holder
	ctx.fillStyle = "#BBB";
	ctx.fillRect(this.position.x+this.size.width-15, this.position.y+15,15,this.size.height-31);
	ctx.restore();

	}
	
objectfix(this); //this must be called before to ensure parent non-primitive elements was not shared
}
scrollbar.prototype = new widget;
scrollbar.prototype.constructor = scrollbar;

function scrollbar_holder(name)
{
	this.name = name;
	this.parent;
	this.zindex;
	
	this.init = function()
	{
	this.zindex = this.parent.zindex+1;
	}
	//returns the value of scrollbar_holder using the current position of scrollbar_holder
	// value is type of percentage
	this.getValue = function()
	{
		var maxHeight = this.dragMax[1];
		var minHeight = this.dragMin[1];
		
		return Math.floor(((this.position.y - this.parent.position.y-15) /(maxHeight - minHeight))*100);
	}
	
	//this function creates a new y position that satisfies the given val
	this.setValue = function(val)
	{
		var maxHeight = this.dragMax[1];
		var minHeight = this.dragMin[1];
		var curHeight = this.dragMin[1] - this.position.y;
		var perOne = (maxHeight-minHeight)/100;
		
		var newHeight = perOne * val;
		var newYPos = minHeight + newHeight;
		
		if(newYPos < this.dragMin[1]) 
			this.position.y = this.dragMin[1];
		else if(newYPos > this.dragMax[1])
			this.position.y = this.dragMax[1];
		else
		{
			this.position.y = newYPos;
		}
	}
	
	
	this.draw = function(ctx)
	{
		//draw the scrollbar_holder
		ctx.save();
		ctx.fillStyle = "#FFF";
		//alert(this.position.x+" "+this.size.width+" "+this.size.height)
		ctx.fillRect(this.position.x,this.position.y,this.size.width,this.size.height);
		ctx.restore();
	}
	
	//this function changes the y position of scroll using percentage up or down
	//for example currentvalue = 98  given amountOfChange = -5 and new val will be 98 - 5 = 93;
	this.changeVal = function(amountOfChange)
	{
		this.setValue(this.getValue()+amountOfChange);
	}
	
objectfix(this);
}
scrollbar_holder.prototype = new widget;
scrollbar_holder.prototype.constructor = scrollbar_holder;

//control keys class definition
function scrollbar_control(name)
{
	this.name = name;
	this.parent;
	this.type; //type means up or down scroll bar
	
	//simple definitions
	this.onclick = new Array();
	this.onmousemove = new Array();
	this.onmouseover = new Array();
	this.onmousedown = new Array();
	this.onmouseup = new Array();
	this.onkeydown = new Array();
	this.onkeyup = new Array();
	this.onkeypress = new Array();
	this.sectionPlaces = new Array();
	this.position = new Object();
	this.size = new Object();
	
	this.draw = function(ctx)
	{
		ctx.save();
		ctx.fillStyle = "#1A1A1A";
		ctx.fillRect(this.position.x,this.position.y, this.size.width, this.size.height);
		ctx.restore();
	}
	
	this.addEventListener("onclick",new Function("event,caller","if(caller.type == 'up'){caller.parent.scrollbar_holder.changeVal(-5);}else if(caller.type == 'down'){caller.parent.scrollbar_holder.changeVal(5);}"));
}
scrollbar_control.prototype = new widget;
scrollbar_control.prototype.constructor = scrollbar_control;